<!--  -->
<template>
  <div class="add-page">
    <van-nav-bar title="新增" />
    <div class="content">
      <div class="more">
        <div class="box">
          <van-form ref="form">
            <van-field v-model="form.money" type="number" name="金额" label="金额" placeholder="请输入金额" :rules="[{ required: true, message: '请输入金额' }]" />
            <van-field v-model="form.remark" rows="2" autosize type="textarea" maxlength="100" name="备注" label="备注" show-word-limit placeholder="请输入备注" :rules="[{ required: true, message: '请输入备注' }]" />
            <div style="margin: 16px;">
              <van-button @click="tj()">提交</van-button>
            </div>
          </van-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import { add } from '@/api/add'
export default {
  name: 'AddPage',
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
    // 这里存放数据
    return {
      form: {
        money: null,
        remark: null
      }
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    async tj () {
      await this.$refs.form.validate()
      const [, res] = await add(this.form)
      this.$toast.success(res.msg)
      this.$router.push('/')
    }
  }
}
</script>
<style lang="less" scoped>
.add-page {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.van-button {
  width: 100%;
  height: 50px;
  color: #fff;
  font-size: 16px;
  border: none;
  background: linear-gradient(to right, #ff9999, #ffa179);
}
.content {
  overflow: auto !important;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 15px;
  .more {
    margin: 0 10px;
    background-color: #fff;
    border-radius: 10px;
    margin-top: 15px;
    p {
      font-size: 16px;
      padding: 10px 15px;
      margin: 0;
    }
    .bb {
      border-bottom: 1px solid #00000014;
    }
    .box {
      padding: 10px;
    }
  }
}
</style>
